<script setup lang="ts">
import { ref } from 'vue'

const active = ref('')
</script>

<template>
  <!-- 路由模式 -->
  <router-view v-slot="{ Component }">
    <transition name='van-fade' mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
  <van-tabbar fixed route v-model="active" active-color="#ee0a24">
    <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item replace to="/cart" icon="shopping-cart-o" badge="20">购物车</van-tabbar-item>
    <van-tabbar-item replace to="/user" icon="friends-o" badge="5">我</van-tabbar-item>
  </van-tabbar>
</template>

<style lang="scss" scoped>
// 添加动效

</style>
